<template>
    <div>
        <a-modal v-model="visible" title="字典值信息" on-ok="handleOk" width="60%">
            <a-button type="primary" @click="addDict()">添加字典值</a-button>
            <div class="ant-pro-table-wrapper">
                <!--数据表格-->
                <a-table
                    ref="table"
                    size="middle"
                    :rowKey="rowKey"
                    :columns="columns"
                    :dataSource="dataSource"
                    :pagination="pagination"
                    :loading="loading"
                    @change="handleTableChange"
                    :alert="{ show: true, clear: true }"
                >
                    <!-- 操作 -->
                    <template slot="expandIcon">
                        <a-icon type="caret-down"/>
                    </template>
                    <template slot="action-slot" slot-scope="text, record">
                        <a @click="handleEditData(record)">编辑</a>
                        <a-divider type="vertical"/>
                        <a-popconfirm 
                            title="确认要删除吗？"
                            @confirm="() => handleDel(record)">
                            <a href="javascript:">删除</a>
                        </a-popconfirm>
                    </template>
                </a-table>
            </div>

            <!--添加页面-->
            <div v-if="dictFlag">
                <a-modal
                    :title="addDictFlag ? '新增' : '修改'"
                    :visible="dictFlag"
                    @ok="handleSubmit"
                    @cancel="handleClose"
                    :confirmLoading="submitLoading"
                    :maskClosable="false"
                    :bodyStyle="{ padding: '12px 18px' }"
                    :centered="true"
                >
                    <a-form-model
                        @submit="handleSubmit"
                        :rules="rules"
                        :model="form"
                        ref="ruleForm"
                    >
                        <a-form-model-item style="display: none">
                            <a-input v-model="form.id" />
                        </a-form-model-item>
                        <a-form-model-item label="数据名称" prop="title">
                            <a-input placeholder="" v-model="form.title" />
                        </a-form-model-item>
                        <a-form-model-item label="数据值" prop="value">
                            <a-input placeholder="" v-model="form.value" />
                        </a-form-model-item>
                        <a-form-model-item label="备注">
                            <a-input placeholder="请输入" v-model="form.description" />
                        </a-form-model-item>
                        <a-form-model-item label="排序值">
                            <a-input placeholder="" v-model="form.sortOrder" />
                        </a-form-model-item>
                        <a-form-model-item label="是否启用">
                            <a-switch :checked="form.status != 0" @change="onChange" />
                        </a-form-model-item>
                    </a-form-model>
                </a-modal>
            </div>
        </a-modal>
    </div>
</template>

<script>

export default {
    data(){
        return{
            // 表头
            columns: [
                {
                    title: "数据名称",
                    dataIndex: "title",
                    align: "center",
                },
                {
                    title: "数据值",
                    dataIndex: "value",
                    align: "center",
                },
                {
                    title: "排序值",
                    dataIndex: "sortOrder",
                    align: "center",
                },
                {
                    title: "备注",
                    dataIndex: "description",
                    align: "center",
                },
                {
                    title: "创建时间",
                    dataIndex: "createTime",
                    align: "center",
                },
                {
                    title: "操作",
                    dataIndex: "action",
                    align: "center",
                    width: "160px",
                    scopedSlots: { customRender: "action-slot" },
                },
            ],
            rules:{
                title:[{required: true, message: '请输入数据名称', trigger: 'blur'}],
                value:[{required: true, message: '请输入数据值', trigger: 'blur'}]
            },
            Title:"数据字典值",
            dataSource:[],//列表
            loading: false,// 数据加载动画
            rowKey: 'id',// 主键 默认id
            submitLoading:false,
            pagination: {// 分页器设置
                total: 0,
                current: 1,
                pageSize: 10,
                showSizeChanger: true,
                showTotal: (total, range) => {
                    return range[0] + '-' + range[1] + ' 共' + total + '条'
                }
            },
            dictFlag:false,//新增页面
            addDictFlag:true, //新增 /修改
            visible:false,//外层总页面
            form:{
                id:"",
                title:"",
                value:"",
                sortOrder:"",
                description:"",
                dictId:"",
                status:1,//默认1
            },
            dict:{},
            dictId:"",
        }
    },
    created(){

    },
    methods:{
        show(data){
            this.visible = true;
            this.dict = data;
            this.form.dictId = data.id;
            this.dictId = data.id;
            this.getList();
        },
        getList(){
            const data = {
                pageVo: {
                    pageNumber: this.pagination.current,
                    pageSize: this.pagination.pageSize,
                },
                dictData:{
                    dictId:this.dict.id
                }
            }
            this.$http('/rapid/dictData/getPage',data).then(res =>{
                if(res.code === 200){
                    this.dataSource = res.result.records;
                    this.pagination.total = !isNaN(res.result.total) ? Number(res.result.total) : 0
                }
            })
            this.form.dictId = this.dictId;
            console.log("this.form.dictId",this.form.dictId)
        },
        onChange(checked){
            if(checked){
                this.form.status = 1;
            }else{
                this.form.status = 0;
            }
        },
        //分页
        handleTableChange (pagination) {
            this.pagination = pagination;
            this.getList()
         },
        //选择
        onSelectChange (selectedRowKeys, selectedRows) {
            this.selectedRowKeys = selectedRowKeys
            this.selectedRows = selectedRows
        },
        //编辑
        handleEditData(record){
            this.dictFlag = true;
            this.addDictFlag = false;
            this.form = record;
        },
        //新增
        addDict(){
            this.dictFlag = true;
            this.addDictFlag = true;
        },
        //删除
        handleDel(record){
            this.$http('/rapid/dictData/delete',record).then(res =>{
                if(res.code === 200){
                    this.$message.success("删除成功!")
                    this.getList();
                }
            })
        },
        //提交
        handleSubmit(){
            this.$refs.ruleForm.validate((valid) =>{
                if(valid){
                    this.$http('/rapid/dictData/saveOrUpdate',this.form).then(res =>{
                        if(res.code === 200){
                            this.$message.success("保存成功!")
                            this.getList();
                        }
                    })
                }else{
                    this.$message.error("请填写必填项")
                    return false;
                }
            })
            this.form.dictId = this.dictId;
        },
        //关闭/取消
        handleClose(){
            this.dictFlag = false;//父层显示，子层
            this.visible = true;
            this.form = {};
            this.getList();//新增之后刷新回显
        }

    }
}
</script>